<template>
  <div class="app-container">
    医院设置列表
    <!--element-ui代码-->
    <!--查询表单-->
    <el-form :inline="true" class="demo-form-inline">
        <el-form-item>
            <el-input v-model="searchObj.hosname" placeholder="医院名称"/>
        </el-form-item>

        <el-form-item>
            <el-input v-model="searchObj.hoscode" placeholder="医院编号"/>
        </el-form-item>

        <el-button type="primary" icon="el-icon-search" @click="fetchData()">查询</el-button>
        <el-button type="default" @click="resetData()">清空</el-button>
    </el-form>

    <el-table
              v-loading="listLoading"
              :data="list"
              element-loading-text="数据加载中"
              border
              fit
              highlight-current-row
              @selection-change="handleSelectionChange">
        <!--
          selection-change事件：选中复选框触发事件
            触发事件，把选中复选框所在行内传递到方法里面
          复选框-->
        <el-table-column type="selection" width="55"/>

        <el-table-column
                        label="序号"
                        width="70"
                        align="center">
            <template slot-scope="scope">
                {{ (page - 1) * limit + scope.$index + 1 }}
            </template>
        </el-table-column>

        <el-table-column prop="hosname" label="医院名称" width="180" />

        <el-table-column prop="hoscode" label="医院编号" width="140" />

        <el-table-column prop="apiUrl" label="地址" width="200"/>

        <el-table-column prop="contactsName" label="联系人"/>

        <el-table-column prop="status" label="状态">
            <template slot-scope="scope">
                {{ scope.row.status===1?'可用':'不可用' }}
            </template>
        </el-table-column>

        <el-table-column label="操作" width="200" align="center">
            <template slot-scope="scope">
                <router-link :to="'/hospset/edit/'+scope.row.id">
                    <el-button type="primary" size="mini" icon="el-icon-edit">修改</el-button>
                </router-link>
                <el-button type="danger" size="mini" icon="el-icon-delete" @click="removeDataById(scope.row.id)">删除</el-button>
                
                <el-button v-if="scope.row.status==1" type="primary" size="mini" 
                  icon="el-icon-delete" @click="lockHospitalSet(scope.row.id,0)">锁定</el-button>
                
                <el-button v-if="scope.row.status==0" type="danger" size="mini" 
                  icon="el-icon-delete" @click="lockHospitalSet(scope.row.id,1)">解锁</el-button>
            </template>
        </el-table-column>
    </el-table>

  <!-- 工具条 -->
  <div>
    <el-button type="danger" size="mini" @click="removeRows()">批量删除</el-button>
  </div>

    <!-- 分页 
    current-change：改变页码数，触发事件
    这个事件封装操作：每次改变页码数，把页面数传递到方法里面
    -->
    <el-pagination
                  :current-page="page"
                  :page-size="limit"
                  :total="total"
                  style="padding: 30px 0; text-align: center;"
                  layout="total, prev, pager, next, jumper"
                  @current-change="fetchData"
                  />

  </div>
</template>

<script>
//引入定义接口js文件
import hospset from '@/api/yygh/hospset'

export default {
  data() {    //变量和初始值
    return {
      listLoading:false, //true出现转图标  false不出现图标
      list:null,//分页查询集合数组
      page:1,//当前页
      limit:4,//每页显示记录数
      total:0,//总记录数
      searchObj: {},  //封装查询条件对象
      multipleSelection:[] //复选框所在行内容，多行
    }
  },
  created() { //页面渲染之前执行
    //调用条件查询方法
    this.fetchData()
  },
  methods:{ //定义方法
    //锁定和解锁
    lockHospitalSet(id,status) {
      hospset.lockHospSet(id,status)
        .then(response => {
          //刷新
          this.fetchData()
        })
    },
    //选中或者不选中复选框执行方法
    //selection选中复选框所在行内容
    handleSelectionChange(selection) {
      this.multipleSelection = selection
      console.log(this.multipleSelection)
    },
    //批量删除
    removeRows() {
      this.$confirm('此操作将批量删除医院设置, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => { //确定，执行then方法
        //把选中复选框id值，变成 [1,2,3] 格式
        //定义数组 idList
        var idList = []
        //遍历this.multipleSelection，得到每个id值
        for(var i=0;i<this.multipleSelection.length;i++) {
          //获取数组每个对象（每行内容）
          var obj = this.multipleSelection[i]
          //每个对象获取id值
          var id = obj.id
          //得到每个id值放到idList数组
          idList.push(id)
        }
        //调用接口
        //格式： [1,2,3]
        hospset.removeBatch(idList)
          .then(response => {
            //提示信息
              this.$message({
                type: 'success',
                message: '批量删除成功!'
              });
              //刷新页面
              this.fetchData()
          })
      })
    },
    //条件查询分页
    //current默认值是1
    fetchData(current=1) {
      this.page = current
      //调用接口得到分页查询数据
      //当前页  ， 每页记录数  ，查询条件对象
      this.listLoading = true
      hospset.getPageList(this.page,this.limit,this.searchObj)
        .then(response => {//成功
          //console.log(response)
          this.list = response.data.rows
          this.total = response.data.total
          // console.log(this.list)
          // console.log(this.total)
          this.listLoading=false
        }) 
        .catch(error => { //失败
          console.log(error)
        }) 
    },
    //清空方法
    resetData() {
      //清空表单
      this.searchObj = {}
      //查询所有数据
      this.fetchData()
    },
    //删除方法
    removeDataById(id) {
      this.$confirm('此操作将删除医院设置信息, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => { //确定，执行then方法
          //调用接口方法根据id删除
          hospset.removeById(id)
            .then(response => {
              //提示信息
              this.$message({
                type: 'success',
                message: '删除成功!'
              });
              //刷新页面
              this.fetchData()
            })
        })
    }
  }
}
</script>